<template>
    <div class="login-account">
        <el-form label-width="60px"  :rules="rules"  :model="account" ref="formRef">
          <el-form-item label="账号"  prop='name'>
            <el-input v-model="account.name"></el-input>
          </el-form-item>

          <el-form-item label="密码"  prop='password'>
            <el-input v-model="account.password" show-password></el-input>
          </el-form-item>
        </el-form>
    </div>
</template>

<script >
import { defineComponent,reactive,ref}  from 'vue' 
import { useStore }  from 'vuex'
import { rules } from '../config/account-config'
import localCache from '@/utils/cache.ts'
import { ElMessage } from 'element-plus'
export default defineComponent({
    setup () {
        const store=useStore()
         const account = reactive({
                name:localCache.getCache('name') ?? '',   //账号
                password:localCache.getCache('password') ?? '' //密码
            })

         const formRef=ref()

         const loginAction=(isKeepPassword)=>{
           formRef.value.validate((valid)=>{
              //  判断是否记住密码
                 if(isKeepPassword){
                  //  本地缓存
                  localCache.setCache('name',account.name)
                  localCache.setCache('password',account.password)
                 }

              // 登陆验证
              store.dispatch('login/accountloginAction',{...account})

                 //判断登陆 成功失败提示 
              if(account.name!=='coderwhy'||account.password!=='123456'){
                   ElMessage({
                      message: '请检查下您的账号或者密码是否输错啦~',
                      type: 'error',
                    })
              }else{
                ElMessage({
                      message: '欢迎~',
                      type: 'success',
                    })
              }
           }) 
        }
        return {
            account,
            rules,
            loginAction,
            formRef
        }
    }
})
</script>

<style lang="less" scoped>

</style>